<template>
	<view class="container">
		<!-- 近期研学 -->
		<view class="info-main">
			<!-- <view class="info">
				<view class="info-des">
					<view class="label">
						<text>近期研学</text>
						<view class="shadow"></view>
					</view>
					<view class="des">
						<text>体验最新研学</text>
						<view class="point">
							<view class="trangle"></view>
						</view>
					</view>
				</view>
				<view class="yan-list">
					<view class="list_item" v-for="(item, index) in recentList" :key="index">
						<view class="yan-top">
							<image :src="item.coverImage" mode="aspectFill" class="list_img"></image>
							<view class="list_text">
								<view class="title">{{ item.goodsName }}</view>
								<view class="num">
									<view>{{ item.createdTime }}</view>
								</view>
							</view>
						</view>
						<view class="yan-bottom">
							<view class="yarn_left">
								<view class="avator">
									<image
										v-for="(img, index) in item.imgs"
										:key="index"
										:src="img"
										mode="widthFix"
										class="avator_img"
									></image>
								</view>
								<view class="num">
									<text>{{ item.joinAmount }}人已报名</text>
								</view>
							</view>
							<view class="btn">
								<text>加入我们</text>
								<view class="trangle"></view>
							</view>
						</view>
					</view>
					<view v-if="recentList.length == 0" style="margin-top: 30rpx; text-align: center; width: 100%">暂无数据</view>
				</view>
			</view> -->
			<view class="info">
				<view class="info-des">
					<view class="label">
						<text>美院研学</text>
						<view class="shadow"></view>
					</view>
					<view class="des">
						<text>种下一个美院梦</text>
						<view class="point">
							<view class="trangle"></view>
						</view>
					</view>
				</view>
				<view class="yan-list_v2">
					<view class="list_item" v-for="(item, index) in hotList" :key="index">
						<view class="yan-left">
							<image :src="item.coverImage" mode="widthFix" class="list_img"></image>
						</view>
						<view class="yan-center">
							<view class="list_text">
								<view class="title">{{ item.goodsName }}</view>
								<view class="num">
									<text> {{ item.joinAmount }}人已报名 </text>
								</view>
								<view class="price">
									<text class="price_num">{{ item.price }}</text>
									<text class="text">元起</text>
								</view>
							</view>
							<view class="yan-right">
								<view class="rank">
									<image
										src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_icon.png"
										mode="scaleToFill"
									/>
									<view class="rank_main">TOP.{{ index + 1 }}</view>
									<!-- <view class="shadow"></view> -->
								</view>
								<view class="btn" @click="toJoin(item.id)">
									<text>加入我们</text>
									<view class="trangle"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view v-if="hotList.length == 0" style="margin-top: 30rpx; text-align: center; width: 100%">暂无数据</view> -->
					<view v-if="hotList.length == 0" style="width: 100%; text-align: center; margin-top: 0rpx">
						<image
							style="width: 500rpx"
							mode="widthFix"
							src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import yanxueApi from '@/api/yanxue/yanxue'
export default {
	data() {
		return {
			currentIndex: 0,
			hotList: [],
			recentList: []
		}
	},
	methods: {
		toJoin(id) {
			console.log(id)
			this.$navTo('pagesA/yanxue/yanxue_detail?id=' + id)
		},
		init() {
			// this.getRecentList()
			this.getHotList()
		},
		// 获取近期研学
		getRecentList() {
			yanxueApi.getRecentList().then(res => {
				this.recentList = res.result || []
			})
		},
		// 获取人气研学
		getHotList() {
			yanxueApi.getHotList({ page: 1, rows: 99 }).then(res => {
				this.hotList = res.result.list
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;

	.info-main {
		padding: 0 24rpx 100rpx;
	}
}

.info {
	// margin-top: 46rpx;
	padding-top: 28rpx;

	.info-des {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label {
			position: relative;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 900;
				font-size: 38rpx;
				color: #000000;
				z-index: 100;
			}

			.shadow {
				margin-top: -12rpx;
				z-index: 99;
				width: 100%;
				height: 8rpx;
				background: #a2ff00;
			}
		}

		.des {
			display: flex;
			align-items: center;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				transform: scale(0.916667);
				color: #747474;
			}

			.point {
				position: relative;
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #a2ff00;
				border-radius: 50%;

				.trangle {
					position: absolute;
					top: 4rpx;
					left: 4rpx;
					// transform: translate(-50%, -50%);
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-bottom: 13.856rpx solid #fff;
					transform: rotate(90deg);
				}
			}
		}
	}

	.yan-list {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		overflow-x: scroll;

		.list_item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			margin-right: 12rpx;

			.yan-top {
				.list_img {
					width: 666rpx;
					// height: 268rpx;
					border-radius-top-left: 20rpx;
					border-radius-top-right: 20rpx;
					vertical-align: bottom;
				}

				.list_text {
					padding: 14rpx 24rpx 0 24rpx;
					height: 120rpx;
					background: linear-gradient(0deg, #facc22 0%, #f95513 100%);
					border-radius: 0px 0px 20rpx 20rpx;

					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #ffffff;
					}

					.num {
						margin-top: 22rpx;
						font-family: HarmonyOS Sans SC;
						font-size: 24rpx;
						color: #ffffff;
					}
				}
			}

			.yan-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;

				.yarn_left {
					display: flex;
					align-items: center;

					.avator {
						margin-top: 20rpx;

						.avator_img:not(:first-child) {
							margin-left: -22rpx;
						}

						.avator_img {
							width: 62rpx;
							height: 62rpx;
							border-radius: 50%;
						}
					}

					.num {
						width: 146rpx;
						height: 40rpx;
						background: #e9e9f0;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 18rpx;
						margin-left: 18rpx;

						text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #353535;
							text-align: center;
							line-height: 40rpx;
							transform: scale(0.75);
						}
					}
				}

				.btn {
					width: 166rpx;
					height: 72rpx;
					background: #a2ff00;
					border-radius: 36rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #030400;
					line-height: 72rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					.trangle {
						// left: 1rpx;
						// transform: translate(-50%, -50%);
						width: 0;
						height: 0;
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid transparent;
						border-bottom: 14.248rpx solid #000;
						transform: rotate(90deg);
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.yan-list_v2 {
		margin-top: 20rpx;

		.list_item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.yan-left {
				.list_img {
					width: 152rpx;
					height: 184rpx !important;
					border-radius: 8rpx;
					vertical-align: bottom;
					object-fit: cover;
				}
			}

			.yan-center {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;
				width: 100%;

				.list_text {
					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 28rrpx;
						color: #000000;
					}

					.num {
						width: 146rpx;
						height: 40rpx;
						background: #e9e9f0;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 18rpx;

						text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #353535;
							text-align: center;
							line-height: 40rpx;
							transform: scale(0.75);
						}
					}

					.price {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.price_num {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 48rpx;
							color: #f95513;
							margin-right: 4rpx;
						}

						.text {
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							color: #f95513;
							transform: scale(0.833333);
						}
					}
				}

				.yan-right {
					.rank {
						// width: 110rpx;
						// height: 56rpx;
						// background: #F95513;
						// border-radius: 20rpx 20rpx 0px 0px;
						// margin: 0 auto;
						margin-bottom: 48rpx;
						position: relative;

						image {
							width: 172rpx;
							height: 74rpx;
						}

						.rank_main {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #ffffff;
							text-align: center;
							line-height: 56rpx;
							position: absolute;
							bottom: 18rpx;
							left: 48rpx;
						}

						// .shadow {
						//     margin-top: -12rpx;
						//     width: 100%;
						//     height: 8rpx;
						//     background: #A2FF00;
						// }
					}

					.btn {
						width: 166rpx;
						height: 72rpx;
						background: #a2ff00;
						border-radius: 36rpx;
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #030400;
						line-height: 72rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;

						.trangle {
							width: 0;
							height: 0;
							border-left: 8rpx solid transparent;
							border-right: 8rpx solid transparent;
							border-bottom: 14.248rpx solid #000;
							transform: rotate(90deg);
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
}
</style>
